<template>
    <div class="register">
        <van-form ref="regForm" class="register-form" @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="registerParams.tel" name="手机号" label="手机号" placeholder="手机号" :rules="telRules" />
                <van-field v-model="registerParams.password" type="password" name="密码" label="密码" placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码', trigger: 'onBlur' }]" />
                <van-field v-model="sms" center clearable label="验证码" placeholder="请输入短信验证码" :rules="smsRules">
                    <template #button>
                        <van-button @click="isPhoneOk&&doSendMsgCode()" size="small" type="primary">发送验证码:</van-button>
                    </template>
                </van-field>
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script setup>
import { ref,reactive } from 'vue';
import { useRouter } from 'vue-router';
import { closeToast,showSuccessToast,showFailToast, showLoadingToast } from 'vant';
import { doCheckPhoneAPI,doSendMsgCodeAPI,doCheckCodeAPI,doFinishRegisterAPI } from "@/api/user.js"

let router = useRouter();

let registerParams = reactive({
    tel: "",
    password: "",
})
let isPhoneOk = ref(false);
let sms = ref("");
let regForm = ref();

let validatorTel = async (tel) => {
    console.log("手机号", tel);
    // 同步校验
    // return true; //校验成功
    // return false; // 校验失败
    // return "手机号还是有问题"; // 校验失败 ->失败的提示

    // 异步校验  17386141517  => 建议返回Promise实例 => 校验成功返回true / 校验失败返回 false/字符串

    // return doCheckPhoneAPI({tel}).then(res=>{
    //     console.log("res",res);
    //     return "123123";
    // }).catch(err=>{
    //     throw err.message;
    // })

    try {
        showLoadingToast("验证中")
        await doCheckPhoneAPI({ tel });
        isPhoneOk.value = true;
        return true;
    } catch (err) {
        return err.message;
    } finally {
        closeToast();
    }


}
let validatorCode = async (code) => {
    console.log("验证码", code);

    if(!isPhoneOk.value){
        return "手机号有误,无法验证";
    }

    try {
        await doCheckCodeAPI({ tel:registerParams.tel,telcode:code });
        return true;
    } catch (err) {
        return err.message;
    } finally {
        closeToast();
    }


}

let telRules = [
    { required: true, message: '请填写手机号', trigger: 'onBlur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请填写正确的手机号', trigger: 'onBlur' },
    { validator: validatorTel, message: '请填写正确的手机号', trigger: 'onBlur' },
]

let smsRules = [
    { required: true, message: '请填写验证码', trigger: 'onBlur' },
    { validator: validatorCode, message: '请填写正确的手机号', trigger: 'onBlur' },
]

let doSendMsgCode = async () =>{
    try {
        var res = await doSendMsgCodeAPI({tel:registerParams.tel});
        console.log("发送成功",res);
        showSuccessToast("验证码发送成功");
    }catch(err){
        showFailToast(err.message);
    }
}

let onSubmit = async () => {
    console.log(1111111);
    try{
        var res = await regForm.value.validate()
        console.log("校验成功",res);
        var res = doFinishRegisterAPI(registerParams);

        // 注册成功
        router.push("/login");


    }catch(err){
        showFailToast(err.message);
    }
    
}





</script>

<style lang="scss" scoped>
.register {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.register-form {
    width: 80%;
    margin: 0 auto;
    margin-top: 0.5rem;

}
</style>